<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <TodoHeader @headFn="addFn" :newArr="list"></TodoHeader>
    <TodoMain :arr="showList" @delFn="delEdit"></TodoMain>
    <TodoFooter :newArr="showList" 
    @changeType="chnageFn" 
    @removeFn="delFn"
    :type="getlist"></TodoFooter>
  </section>
</template>

<script>
// 1.0 样式引入
import "./styles/base.css";
import "./styles/index.css";

import TodoHeader from "./components/TodoHeader";
import TodoMain from "./components/TodoMain";
import TodoFooter from "./components/TodoFooter";

export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data() {
    return {
      list:JSON.parse(localStorage.getItem('list'))||[],
      getlist:'all'
    };
  },
  methods: {
    addFn(word) {
      this.list.push({
        id: this.list.length ? this.list.at(-1).id + 1 : 100,
        name: word,
        isDone: false,
      });
    },
    delEdit(ind){
    this.list= this.list.filter(item=>item.id!==ind)
    },
    chnageFn(type){
    this.getlist=type
    },
    delFn(){
    this.list= this.list.filter(item=>item.isDone===false)
    },
 
  },
  computed:{
    showList(){
      if(this.getlist==='yes'){
        return this.list.filter(item=>item.isDone===true)
      } else if(this.getlist==='no'){
        return this.list.filter(item=>item.isDone===false)
      }else{
        return this.list
      }
    }
  },
  watch:{
    list:{
      deep:true,
      handler(){
      localStorage.setItem('list',JSON.stringify(this.list))
      },
    
    }
  }
};
</script>